<html>
    <head>
        <meta charset="utf-8">
        <title>放大镜控件</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet.js"></script>

        <!-- 1.添加magnifyingglass插件的js和css引用 -->
        <script type="text/javascript" src="../lib/plugins/control/leaflet.magnifyingglass.js"></script>
        <link rel="stylesheet" type="text/css" href="../lib/plugins/control/leaflet.magnifyingglass.css">


        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>

<script type="text/javascript">
    var map = null; 

    function init(){

        map = L.map("mapDiv")
               .setView([0,0], 2);

        // 2. 创建两个OSM的TileLayer对象
        var url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
        //  tile_layer:正常显示OSM图层  
        var tile_layer = L.tileLayer(url).addTo(map);
        //  glas_layer:在放大镜中显示
        var glas_layer = L.tileLayer(url);

        // 3.用glas_layer作为参数创建放大镜控件，并添加到地图上
        var magnifyingGlass = L.magnifyingGlass({
                                    layers: [ glas_layer ]
                                }).addTo(map);
    }
</script>
    


